<template>
  <section class='f-withdraw'>
    <section class="f-price">
      <p>可提现金额(元)</p>
      <p>{{ toThousands(formData.incomeRest) }}</p>
    </section>

    <section class="f-input">
      <p style="font-weight: 300;font-size: 12px;color: #424242;">提现金额</p>
      <van-cell-group inset style="margin:0">
        <van-field v-model="formData.fee" placeholder="请输入提现金额" type="number" label-width="15px" style="padding:20px 0"
          :rules="[{ required: true, message: '请填写提现金额' }]" @update:model-value="handlerInput">
          <template #label>
            <p style="font-weight: 500;font-size: 24px;color: #010101;">¥</p>
          </template>
          <template #button>
            <p style="font-weight: 300;font-size: 12px;color: #488BFE;" @click="setPrice">全部</p>
          </template>
        </van-field>
      </van-cell-group>
    </section>

    <section class="f-input" style="margin-top:10px">
      <p style="font-weight: 300;font-size: 12px;color: #424242;">验证码</p>
      <van-cell-group inset style="margin:0">
        <van-field v-model="formData.authCode" placeholder="请输入验证码" type="number" label-width="15px" style="padding:20px 0"
          maxlength="6" :rules="[{ required: true, message: '请填写验证码' }]">
          <template #button>
            <van-button size="small" type="primary" @click="getSendcode">{{count? count + '秒': '获取验证码'}}</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </section>

    <section class="f-account">
      <p style="font-weight: 300;font-size: 12px;color: #424242;">提现账户</p>
      <section class="f-flex-between" style="padding:12px 0">
        <!-- <div class="g-flex-ct" style="height:40px" v-if="formData.payType == 3">
          <img style="width:23px;height:23px" src="@/assets/icons/withdraw_icon_zfb.png" alt="">
          <div class="f-ml-10" style="font-weight: 300;font-size: 10px;color: #000000;">
            <p>支付宝账户:</p>
            <p>{{formData.aliLoginAccount}}</p>
          </div>
        </div>
        <div class="g-flex-ct" style="height:40px" v-if="formData.payType == 2">
          <img style="width:23px;height:23px" src="@/assets/icons/withdraw_icon_wx.png" alt="">
          <p class="f-ml-10" style="font-weight: 300;font-size: 12px;color: #000000;">微信零钱</p>
        </div> -->
        <div class="g-flex-ct" style="height:40px" v-if="formData.payType == 11">
          <img style="width:23px;height:23px" src="@/assets/icons/withdraw_icon_yhk.png" alt="">
          <div class="f-ml-10" style="font-weight: 300;font-size: 10px;color: #000000;">
            <p>银行卡账户:</p>
            <p>{{formData.billNo}}</p>
          </div>
        </div>
        <van-button round type="primary" plain color="#424242" size="mini" @click="off.popup = true">
          <p style="padding:0 7px">切换</p>
        </van-button>
      </section>
    </section>

    <section class="f-tips">
      <p>温馨提示：</p>
      <p v-for="(item,index) in  formData.remarks" :key="index">{{item}}</p>
    </section>

    <div style="padding:21px 40px 0 40px">
      <van-button round block type="primary" :color="formData.fee && formData.authCode? '#488BFE': '#8E9FBD'"
        @click="onSubmit">确认提现</van-button>
    </div>

    <van-popup v-model:show="off.popup" closeable position="bottom" close-icon-position="top-left">
      <p class="f-popup-title">选择提现账号</p>
      <van-radio-group v-model="formData.payType" direction="horizontal" style="padding:22px" @change="off.popup = false">
        <!-- <van-radio :name="3" label-position="left" class="f-flex-between f-mb-30" style="width:100%"
          v-if="formData.aliLoginAccount">
          <div class="g-flex-ct">
            <img style="width:30px;height:30px" src="@/assets/icons/withdraw_icon_zfb.png" alt="">
            <div class="f-ml-10" style="font-weight: 300;font-size: 12px;color: #000000;">
              <p>支付宝账户：{{formData.aliLoginAccount}}</p>
              <p style="font-size: 10px;margin-top: 2px">预计24小时内到账</p>
            </div>
          </div>
        </van-radio>
        <van-radio :name="2" label-position="left" class="f-flex-between f-mb-30" style="width:100%">
          <div class="g-flex-ct">
            <img style="width:30px;height:30px" src="@/assets/icons/withdraw_icon_wx.png" alt="">
            <div class="f-ml-10" style="font-weight: 300;font-size: 12px;color: #000000;">
              <p>微信零钱</p>
              <p style="font-size: 10px;margin-top: 2px">预计24小时内到账</p>
            </div>
          </div>
        </van-radio> -->
        <van-radio :name="11" label-position="left" class="f-flex-between" style="width:100%">
          <div class="g-flex-ct">
            <img style="height:30px;width:30px" src="@/assets/icons/withdraw_icon_yhk.png" alt="">
            <div class="f-ml-10" style="font-weight: 300;font-size: 12px;color: #000000;">
              <p>银行卡账户：{{formData.billNo}}</p>
              <p style="font-size: 10px;margin-top: 2px">预计24小时内到账</p>
            </div>
          </div>
        </van-radio>
      </van-radio-group>

      <div class="f-flex-ct" style="padding: 22px">
        <img style="width:19px;height:17px" src="@/assets/icons/withdraw_icon_account_manage.png" alt="">
        <p class="f-ml-10" style="font-weight: 400;font-size: 16px;color: #10AEFF;" @click="pageJump('account')">管理提现账号</p>
      </div>
    </van-popup>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { successDeal, toThousands, warningDeal } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      off: {
        popup: false,
      },
      formData: {
        payType: 11
      },

      counter: 0, // 计时器
      count: 0,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '提现',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getWithdrawInfo()
    })

    const getWithdrawInfo = () => {
      api.withdrawInfo().then(res => {
        res.data.payType = 11
        state.formData = res.data
      })
    }

    const pageJump = (name) => {
      router.push({
        path: `/capital/${name}`
      })
    }

    const handlerInput = (value) => {
      if (Number(value) > Number(state.formData.incomeRest)) {
        setPrice()
      }
    }

    const setPrice = () => {
      state.formData.fee = state.formData.incomeRest
    }

    // 获取短信验证码
    const getSendcode = () => {
      if (!state.formData.fee) {
        warningDeal('请输入提现金额！')
        return
      }
      if (state.count) return
      state.count = 120;
      countDown();

      let json = {
        fee: state.formData.fee,
        "payType": state.formData.payType,
      }
      api.sendcode(json).then((res) => {
        if (res.code == 200) {
          successDeal('短信已发送！')
        }
      }).catch(err => {
        state.count = 0
        clearCounter()
      })
    }

    //计时
    const countDown = () => {
      let count = state.count;

      clearCounter();
      state.counter = setInterval(() => {
        count--;
        state.count = count;
        if (count == 0) {
          clearCounter();
        }
      }, 1000);
    }

    //清除定时器
    const clearCounter = () => {
      clearInterval(state.counter);
    }

    const onSubmit = () => {
      // 支付宝
      if (state.formData.payType == 3 || state.formData.payType == 11) {
        let json = {
          "authCode": state.formData.authCode,
          "fee": state.formData.fee,
          "payType": state.formData.payType,
          "wxCode": ""
        }
        api.withdrawSubmit(json).then(res => {
          successDeal('提现申请成功！')
          setTimeout(() => {
            state.count = 0;
            clearCounter()
            getWithdrawInfo()
          }, 1000)
        })
      }
      // 微信
      if (state.formData.payType == 2) {
        JsBridge.callHandler('wxAuth', { state: 'miaofan', appid: state.formData.wxAppId }, (res) => {
          console.log('提现的回调：', res)
          // let json = {
          //   "authCode": state.formData.authCode,
          //   "fee": state.formData.fee,
          //   "payType": state.formData.payType,
          //   "wxCode": ""
          // }
          // api.withdrawSubmit(json).then(res => {
          //   successDeal('提现申请成功！')
          //   setTimeout(() => {
          //     state.count = 0;
          //     clearCounter()
          //     getWithdrawInfo()
          //   }, 1000)
          // })
        })
      }
    }

    return {
      ...toRefs(state),
      toThousands,
      pageJump,
      handlerInput,
      setPrice,
      getSendcode,
      onSubmit
    }
  }
}
</script>

<style lang='scss' scoped>
.f-withdraw {
  .f-price {
    padding: 39px 0 46px 0;
    text-align: center;
    p:first-child {
      font-weight: 400;
      font-size: 12px;
      color: #aaaaaa;
    }
    p:last-child {
      font-weight: 500;
      font-size: 24px;
      color: #000000;
      margin-top: 10px;
    }
  }
  .f-input {
    width: 347px;
    height: 108px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 14px;
    padding: 17px 13px 0px 14px;
  }
  .f-account {
    width: 347px;
    background: #ffffff;
    border-radius: 5px;
    margin: 12px 14px 19px 14px;
    padding: 17px 13px 0px 14px;
  }
  .f-tips {
    margin: 0 28px 48px 15px;
    font-weight: 300;
    font-size: 10px;
    color: #ff2b2b;
    line-height: 20px;
  }
}
</style>